<template>
  <div class="box">
    <div class="commonHeader">
      维修数据
    </div>
    <div class="content">
      <div class="data-box" style="height:100%">
        <div class="line-box">
          <i class="t-l-line"></i>
          <i class="l-t-line"></i>
        </div>
        <div class="line-box">
          <i class="t-r-line"></i>
          <i class="r-t-line"></i>
        </div>
        <div class="line-box">
          <i class="b-l-line"></i>
          <i class="l-b-line"></i>
        </div>
        <div class="line-box">
          <i class="b-r-line"></i>
          <i class="r-b-line"></i>
        </div>
        <div class="inner-box">
          <el-row class="analysis-container">
            <el-col :span="12" class="analysis-box">
              <div class="equipment count">{{ total }}</div>
              <p class="desc">累计报修数量</p>
            </el-col>
            <el-col :span="12" class="analysis-box">
              <div class="equipment count">{{ finishRate }}</div>
              <p class="desc">报修解决率</p>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as api from "@/api";
export default {
  data() {
    return {
      total: "",
      finished: "",
      finishRate: "",
      timer: ""
    };
  },
  mounted() {
    this.getMaintenanceOverview();
    this.timer = setInterval(() => {
      this.getMaintenanceOverview();
    }, 60000);
  },
  methods: {
    async getMaintenanceOverview() {
      let { total, finished, finishRate } = await api.getMaintenanceOverview();
      this.total = total;
      this.finished = finished;
      this.finishRate = finishRate;
    }
  },
  beforeDestroy() {
    clearInterval(this.timer);
  }
};
</script>
<style lang="less" scoped>
.box {
  height: 20%;
  .content {
    padding-top: 0.5rem;
    box-sizing: border-box;
    height: calc(100% - 2rem);
    .inner-box {
      height: 100%;
      overflow: auto;
      .analysis-container {
        display: flex;
        align-items: center;
        height: 100%;
        .analysis-box {
          flex: 1;
          display: flex;
          justify-content: center;
          flex-direction: column;
          align-items: center;
          .count {
            font-size: 30px;
            font-weight: 700;
            text-align: center;
          }
          .desc {
            padding-top: 5px;
            font-weight: 500;
            font-size: 14px;
          }
        }
      }
    }
  }
}
</style>
